<template>
  <div class="">
    <div class="title">
      <span class="title_big">评论管理-列表</span>
      <span class="title_small">（共1条）</span>
      <el-input
        placeholder="搜索"
        v-model="input2"
        style="width: 300px; margin-left: 1055px"
      >
        <template slot="append">搜索</template>
      </el-input>
    </div>
    <div class="filter">
      <el-button type="info" @click="editUser">审核</el-button>
      <el-button type="info" @click="editUser">撤销审核</el-button>
      <el-button type="info" @click="ReleaseReview_two">修改</el-button>
      <el-button type="info">删除</el-button>
      <el-button type="info">评论设置</el-button>
    </div>
    <div class="dropdown">
    
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column
          type="selection"
          label="全选"
          width="55"
        ></el-table-column>
        <el-table-column prop="net" label="ID" sortable width="70">
        </el-table-column>
        <el-table-column prop="title" label="用户" sortable width="200">
        <span>戴用名</span>
          <br><span>已审核</span>
        </el-table-column>
        <el-table-column prop="date" label="评论" sortable width="780">
         <span class="original">{{original}}</span><br>
         <span class="present ">{{comment}}</span>
        </el-table-column>
        <el-table-column prop="date" label="评论日期" sortable width="240">
          <span>{{time}}</span>
        </el-table-column>
        
        <el-table-column prop="operate" label="操作">
       <span class="columns">审核</span><span class="copy">撤销审核</span><span class="modify">修改</span><span class="delete">删除</span>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSize"
        @current-change="handlePage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
 
    </div>
      <Drawer :isDrawer.sync="isDrawer" :title="'评论管理-修改'" :size="'60%'">
      <Discussion></Discussion>
      <template #footer>
        <el-button size="medium" @click="closeDrawer">取消</el-button>
        <el-button type="primary" size="medium">保存</el-button>
      </template>
    </Drawer>
    <!-- <Drawer :isDrawer.sync="isDrawer" :title="'评论设置-修改'" :size="'60%'">
      <Setup></Setup>
      <template #footer>
        <el-button size="medium" @click="closeDrawer">取消</el-button>
        <el-button type="primary" size="medium">保存</el-button>
      </template>
    </Drawer>  -->
  </div>
  
</template>

<script >
import Drawer from "@/components/drawer";
import Discussion from './components/Discussion.vue';
import Setup from './components/Setup.vue';
import * as api from './api'
export default {
  components: {
        Drawer,
    Discussion,
    Setup,
      },
  name: "",
  data() {
    return {
      time:"",
      handleSize: "",
        handlePage: "",
      isDrawer: false,
      input2: "",
      original:"",
      comment:"",
       userForm: [],//用户列表
      total: null,//总条数
      page: 1,//页数
      size: 10,//条数
        tableData: [{
          net:'0',
          date: '2016-05-02',
          name: '首页;新闻',
          address: '上海市普陀区金沙江路 1518 弄'
        },]
      }
    },
    created(){
      this.mycomments()
    },
  methods: {
    // 查看评论
    mycomments(){
      const params = {
        userId: 123
      };
       api.Comment(params).then((res) => {
         console.log(1111111111,res);
         this.original = res.data.list[0].content
        this.comment = res.data.list[0].commentContent
        this.time = res.data.list[0].createdTime
       })
    },
    editUser() {
      this.isDrawer = true;
    },
    closeDrawer() {
      this.isDrawer = false;
    },
    editUsers() {
      this.isDrawers = true;
    },
     closeDrawers() {
      this.isDrawers = false;
    },
  },
};
</script>

<style lang="" scoped>
.columns{
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.delete{
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.modify{
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.copy{
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.present{
  font-family:Source Han Sans CN;
font-weight:700;
color:#333333;
font-size:16px;
}
.original{
  font-family:Source Han Sans CN;
color:#6878f0;
font-size:16px;
}
.eject {
  margin-top: 20px;
}
.filter > div {
  width: 56px;
  height: 24px;
  background-color: #6878f0;
  border-radius: 5px;
  box-shadow: 0px 0px 6px rgba(0, 12, 100, 0.2);
  margin-left: 20px;
}
.filter {
  display: flex;
  margin-top: 25px;
  margin-bottom: 30px;
}
.title_big {
  width: 153px;
  height: 24px;
  font-family: Source Han Sans CN;
  font-weight: 700;
  color: #666666;
  font-size: 24px;
}
.title {
  margin-left: 20px;
  margin-top: 40px;
}
</style>
